<template>
	<view
		style="padding-top: 15vh; background-color: #ffffff; position: absolute; top: 0px; bottom: 0px; right: 0; left: 0;">
		<view class="logo">
			<p>你好，</p>
			<p>欢迎来到橙单！</p>
		</view>
		<view class="inputs">
			<u-input class="inp" v-model="formData.userName" :height="44" placeholder="请输入账号"
				:custom-style="inputCustomStyle">
			</u-input>
		</view>
		<view class="inputs">
			<u-input class="inp" v-model="formData.password" :height="44" placeholder="请输入密码"
				:custom-style="inputCustomStyle" type="password">
			</u-input>
		</view>
		<view style="margin: 5vh 24px 0px 24px;">
			<u-button @click="login" type="primary">登录</u-button>
			<view class="agree">登录即表明同意<text>《XXX用户协议》</text>和<text>《隐私协议》</text></view>
		</view>
		<!-- <u-button class="login-btn" @click="login">登录</u-button> -->
		<image class="slogan-icon" :src="sloganIcon" mode="widthFix"></image>
	</view>
</template>

<script>
	import { SystemController } from '@/api/index.js';
	import {
		encrypt
	} from '@/utils'
	import accountIcon from '@/static/login/account-icon.png';
	import passwordIcon from '@/static/login/password-icon.png';
	import passwordVisualIcon from '@/static/login/password-visual-icon.png';
	import passwordInvisibleIcon from '@/static/login/password-invisible-icon.png';
	import sloganIcon from '@/static/login/slogan-icon.png';

	export default {
		data() {
			return {
				accountIcon: accountIcon,
				passwordIcon: passwordIcon,
				passwordVisualIcon: passwordVisualIcon,
				passwordInvisibleIcon: passwordInvisibleIcon,
				sloganIcon: sloganIcon,
				passwordVisual: false,
				inputCustomStyle: {
					"padding": "0",
					"height": "44px"
				},
				checkboxValue: null,
				formData: {
					userName: 'admin',
					password: '123456'
				}

			}
		},
		methods: {
			radioChange(detail) { //记住密码
				this.checkboxValue = detail
			},
			login() {
				SystemController.loginMobile(this, {
					loginName: this.formData.userName,
					password: encrypt(this.formData.password)
				}).then((res) => {
					uni.setStorage({
						key: 'setHomeEntryList',
						data: res.mobileEntryList,
						success: function(e) {
							uni.setStorage({
								key: 'token',
								data: res.tokenData,
								success: function() {
									uni.switchTab({
										url: '/pages/home/index'
									})
								}
							});
							uni.setStorage({
								key: 'userInfo',
								data: res
							});
						}
					})
				}).catch((e) => {
					console.log(e)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.logo {
		width: 100%;
		margin: 0px 24px;
		margin-bottom: 7vh;

		// image {
		// 	width: 3.375rem;
		// 	height: 3.375rem;
		// 	margin-bottom: 5px;
		// }

		p {
			height: 35px;
			line-height: 35px;
			font-size: 24px;
			color: #333333;
			font-weight: 500;
		}
	}


	.inputs {
		padding: 0 20rpx;
		background: #fafafa;
		margin: 20rpx 48rpx;

		.inp {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
		}
	}

	.agree {
		margin-top: 32rpx;
		color: #939393;
		font-size: 28rpx;
		text-align: center;

		text {
			color: $u-type-primary;
		}
	}

	.slogan-icon {
		width: 54vw;
		height: auto;
		position: fixed;
		bottom: 6vh;
		right: calc((100% - 54vw) / 2);
	}
</style>
<style>
	.u-input__right-icon__clear{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>